<template>
    <div id="paper-ExaminationPaper">
        <el-dialog
            :title="titleCon"
            v-model="isUseDialog" 
            draggable 
            :close-on-click-modal="false" 
            width="50%" 
            :before-close="handleClose"
            :destroy-on-close="true"
        >
            <!-- 试卷内容 -->
            <div class="paper-outer">
                <!-- 标题 -->
                <div class="paper-outer-title">
                    <h2>{{ paperName }}：总分（{{ totalNum }}）</h2>
                </div>
                <!-- 内容 -->
                <ul>
                    <template v-for="item in paperCon" :key="item.id">
                        <li class="paper-topic">
                            <h4>{{item.n_Sort}}：{{ item.v_Topic }}<span>（题型：{{ item.v_TypeName }}，单题分数：{{ item.n_Score }}）</span></h4>
                            <template v-if="item.n_Type !== 2" v-for="opIem in item.options" :key="opIem.id">
                                <span class="paper-con-s">{{opIem.v_Option}}：{{opIem.v_Content}}</span>
                            </template>
                            <template v-else v-for="(opIem , index) in item.options" :key="index">
                                <span class="paper-con-s">{{opIem.v_Content}}</span>
                            </template>
                        </li>
                    </template>
                </ul>
            </div>
            <template #footer>
                <el-button @click="cancelUseClick">关闭预览</el-button>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent, reactive , toRefs , computed , watch } from 'vue';
interface PaperInfo {
  paperName: string;
  paperCon: Array<{
    v_Topic: String,
    id: Number,
    n_Score: Number,
    n_Sort: Number,
    n_Type: Number,
    options: any,
    v_TypeName: String,
  }>;
  titleCon: string;
  totalNum: Number;
}
export default defineComponent( {
    name: 'paper-ExaminationPaper',
    components: {},
    props: {
        isUseDialog:{
            type: Boolean,
            default: false,
        },
        repairInfo: {
            type: String,
            default: ''
        }
    },
    setup(props,ctx){
        const paperInfo = reactive<PaperInfo>({
            paperName: '',
            paperCon: [],
            titleCon: '',
            totalNum: 0,
        });
        /*** 监听isUseDialog的变化 */
        watch(() => props.isUseDialog,(newVal) => {
            if(newVal){
                paperInfo.paperName = JSON.parse(props.repairInfo).paperName;
                paperInfo.paperCon = JSON.parse(props.repairInfo).paperArr;
                paperInfo.titleCon = "培训计划：" + JSON.parse(props.repairInfo).titleCon;
                paperInfo.totalNum = JSON.parse(props.repairInfo).totalNum;
                console.log(JSON.parse(props.repairInfo),'repairInfo')
            }
        })

        /*** handleClose 关闭按钮点击事件 */
        const handleClose = () => {
            cancelUseClick()
        }

        /*** cancelUseClick 取消事件 */
        const cancelUseClick = () => {
            ctx.emit('cancelPaperClick')
        }

        /*** isUseDialog 响应弹窗的关闭  */
        const isUseDialog = computed(() => {
            return props.isUseDialog
        })

        return {
            handleClose,
            cancelUseClick,
            isUseDialog,
            ...toRefs(paperInfo),
        }
    },
} )
</script>
<style scoped lang="scss">
#paper-ExaminationPaper{
    .paper-outer{
        background-color: #FFFFFF;
        width: 60%;
        margin: auto;
        min-height: 60vh;
        border-radius: 5px;
        padding: 20px;
        .paper-outer-title{
            margin: auto;
            width: 100%;
            padding-bottom: 10px;
            border-bottom: 1px dashed #6C6E72;
            h2{
                width: 100%;
                text-align: center;
                color: #39393A;
            }
        }
        ul,li{
            list-style: none;
            margin: 0;
            padding: 0;
            h4{
                color: #363637;   
                span{
                    color: #4C4D4F;
                    font-size: 12px;
                } 
            }
            .paper-con-s{
                display: block;
                color: #363637;
                padding: 5px 0; 
            }
        }
        .paper-topic{
            padding: 10px 0;
        }
    }
}
</style>